<template>
  <el-container id="Home">
    <!-- 左侧内容 -->
    <el-aside width="220px" class="Home_left">
      <el-row class="tac">
        <el-col :span="24">
          <div class="main-title">{{routesTitle}}</div>
          <el-menu
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            background-color="#333D4B"
            active-text-color="#409EFF"
            text-color="#fff"
          >
            <template v-for="(item, index) in routesData" v-if="!item.hidden">
              <el-submenu  v-if="item.leaf" :index="index + ''">
                <template  slot="title">
                  <i :class="item.iconCls" ></i>
                  <span class="item_">{{ item.name }}</span>
                </template>
                <el-menu-item
                  class="item_children"
                  v-for="child in item.children"
                  :index="child.path"
                  :key="child.path"
                  v-if="!child.hidden"
                  ><i :class="child.iconCls"></i>{{ child.name }}</el-menu-item
                >
              </el-submenu>
              <el-menu-item
                v-if="!item.leaf && item.children.length > 0"
                :index="item.children[0].path"
                :key="index"
              >
                <i :class="item.iconCls"></i>
                {{ item.children[0].name }}
              </el-menu-item>
            </template>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>

    <!-- 主体内容 -->
    <el-main>
      <!-- 指定组件的呈现位置 -->
      <!-- <transition name="fade" mode="out-in"> -->
        <router-view />
      <!-- </transition> -->
    </el-main>
    
  </el-container>
</template>

<script>
import { getRoute } from "../router";
export default {
  data() {
    return {
      routesData: [],
      routesTitle:"小红书助手后台管理",
    };
  },
  methods: {},
  mounted() {
    var isLogin = localStorage.getItem("isLogin");
    console.log(isLogin,'缓存的登录值')
    if(isLogin == null){
      var type = 0;
      var urls = "/Login";
      this.$router.push(urls);
      return false;
    }else{
      this.routesData = getRoute(isLogin);
      console.log('this.routesData',this.routesData);
    }
  },
};
</script>

<style scoped lang="less">
 .el-menu-item {
    font-size: 15px;
  }
.item_ {
  font-size: 15px;
}
.item_children {
  font-size: 14px;
}
.el-menu-item.is-active {
  background-color: #2e3641 !important;
}
#Home {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100%;
  
  .main-title {
    height: 70px;
    width: 100%;
    line-height: 70px;
    text-align: center;
    color: #fff;
    background: #4d8cca;
    font-size: 18px;
    letter-spacing: 1px;
    font-family: STKaiti,Georgia,Serif;
    font-weight: 600;
  }

  .Home_left {
    border-right: solid 1px #333D4B;
    font-size: 30px;
    background-color: #333D4B;
  }
}
</style>